<%--
  Created by IntelliJ IDEA.
  User: cyc
  Date: 2021/9/28
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>易买网 - 首页</title>
    <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css" />
    <script type="text/javascript" src="${pageContext.request.contextPath}/scripts/function.js"></script>
</head>
<body>
<div id="welcomeImage">
    <img width="100%" height="150" src="images/banner.jpg" alt="welcome">
</div>
<div id="header" class="wrap">
    <div id="logo"><img src="${pageContext.request.contextPath}/images/logo.gif" /></div>
    <div class="help">
        <c:if test="${sessionScope.user!=null}"><a href="shopping.jsp" id="shoppingBag" class="shopping">购物车${sessionScope.shopList.size()}件</a></c:if>
        <c:if test="${sessionScope.user==null}"><a href="${pageContext.request.contextPath}/login.jsp">登录</a></c:if>
        <c:if test="${user!=null}"> <span style="color: red">${user.username}你好</span> </c:if>
        <a class="button" id="logout" href="${pageContext.request.contextPath}/user/logout">注销</a><a href="register.jsp">注册</a>
        <a href="${pageContext.request.contextPath}/comment/all">留言</a>
        <a href="login.jsp">后台管理</a>
    </div>
    <div class="navbar">
        <ul class="clearfix">
            <li class="current"><a href="#">首页</a></li>
            <li><a href="#">图书</a></li>
            <li><a href="#">百货</a></li>
            <li><a href="#">品牌</a></li>
            <li><a href="#">促销</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="wrap">
        <ul class="clearfix">
            <li class="first"><a href="#">音乐</a></li>
            <li><a href="#">影视</a></li>
            <li><a href="#">少儿</a></li>
            <li><a href="#">动漫</a></li>
            <li><a href="#">小说</a></li>
            <li><a href="#">外语</a></li>
            <li><a href="#">数码相机</a></li>
            <li><a href="#">笔记本</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">秋冬靴</a></li>
            <li><a href="#">运动鞋</a></li>
            <li><a href="#">美容护肤</a></li>
            <li><a href="#">家纺用品</a></li>
            <li><a href="#">婴幼奶粉</a></li>
            <li><a href="#">饰品</a></li>
            <li class="last"><a href="#">Investor Relations</a></li>
        </ul>
    </div>
</div>
<div id="main" class="wrap">
    <div class="lefter" style="overflow: auto;height: 850px">
        <c:if test="${sessionScope.product!=null}">
            <div class="last-view">
                <h2>最近浏览</h2>

                <dl class="clearfix">
                    <dt><img src="images/product/${sessionScope.product.fileName}" style="width: 100%;height: 50px" /></dt>
                    <dd><a href="ProductSingleViewServlet?id=${sessionScope.product.id}"  target="_self">${sessionScope.product.name}</a><a href="ProductSingleViewServlet?id=${sessionScope.product.id}"></a></dd>
                    <dt>${sessionScope.product.price}</dt>
                    <dd>${sessionScope.product.description}</dd>
                </dl>

            </div>
        </c:if>
        <div class="box" >
            <h2>商品分类</h2>
            <dl id="category" >


            </dl>
        </div>
        <div class="spacer"></div>

    </div>
    <div class="main">
        <div class="price-off">
            <div class="slideBox">
                <ul id="slideBox">

                    <li><img src="images/product/banner_1.jpg"/></li>
                </ul>
            </div>
            <h2>商品列表</h2>
            <ul class="product clearfix" id="product">

            </ul>
<%--            分页--%>
<%--            <nav>--%>
<%--                <ul class="clearfix" style="display: inline-block">--%>
<%--                    <li><a href="javascript:void(0)" onclick="jump(1,16)">首页</a></li>--%>
<%--                    <c:if test="${indexPageInfo.hasPreviousPage}" >--%>
<%--                        <li><a href="javascript:void(0)" onclick="jump(${indexPageInfo.pageNum-1},16)">上一页</a></li>--%>
<%--                    </c:if>--%>


<%--                    第${indexPageInfo.pageNum}页/共${indexPageInfo.pages}页--%>

<%--                    <c:if test="${indexPageInfo.hasNextPage}" >--%>
<%--                        <li><a href="javascript:void(0)" onclick="jump(${indexPageInfo.pageNum+1},16)">下一页</a></li>--%>
<%--                    </c:if>--%>

<%--                    <li><a href="javascript:void(0)" onclick="jump(${indexPageInfo.pages},16)">尾页</a></li>--%>
<%--                </ul>--%>
<%--            </nav>--%>

        </div>
        <div class="side">
            <div class="spacer" ></div>
            <div class="news-list" style="overflow: auto;height: 700px">
                <h4>新闻动态</h4>
                <ul id="news" >

                </ul>
            </div>
        </div>
        <div class="spacer clear"></div>
    </div>
</div>
<div id="footer">
    Copyright &copy; 2013 北大青鸟 All Rights Reserved. 京ICP证1000001号
</div>

<script src="${pageContext.request.contextPath}/scripts/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function (){


        // 新闻动态
        $.post("${pageContext.request.contextPath}/news/all",{},function (res){
            var news="";
            for (i in res){
                news+="<li><a href='${pageContext.request.contextPath}/news/select?id="+res[i].id +"'  target='_self'>"+res[i].title+"</a></li>";
            }
            $("#news").html(news);
        },"json");


        //左侧分类列表
        $.post("${pageContext.request.contextPath}/category/all",{},function (res){
            var cate="";
            for (i in res){
                if (res[i].parentid==0){
                    cate+="<dt>"+ res[i].name+"</dt>";
                    for (j in res){
                        if (res[j].parentid==res[i].id){
                            cate+="<dd><a class='cate' href=${pageContext.request.contextPath}/product/select?cateId="+res[i].id+">"+res[i].name+"</a></dd>";

                            for (x in res){
                                if (res[x].parentid==res[j].id){
                                    cate+="<dd><a class='cate' href=${pageContext.request.contextPath}/product/select?cateId="+res[j].id+">"+res[x].name+"</a></dd>";
                                }
                            }

                        }
                    }
                }
            }
            $("#category").html(cate);
        },"json");


        //商品列表
        $.post("${pageContext.request.contextPath}/product/all",{},function (res){
            var data="";
            for (i in res){
              data=data+"<li><dl><dt><a href=${pageContext.request.contextPath}/product/selectbyid?id="+res[i].id+" target='_self'>"+
                  "<img src=${pageContext.request.contextPath}/images/product/"+res[i].filename+" /></s></dt>"+
                  "<dd class=title><a href='#' target='_self'>"+res[i].name+"</a></dd>"+
                  "<dd class='price'>￥"+res[i].price+"</dd></dl></li>";
            }
            $("#product").html(data);
        },"json");

    });

    //轮播图的跳转
    setTimeout(function (){
        i=Math.floor((Math.random()*4)+1);
        var str="images/product/banner_"+i+".jpg";
        $("#slideBox li img").attr("src",str)
    },500)

    <%--//分页--%>
    <%--function jump(pageNum,pageSize){--%>
    <%--    var data={"pageNum":pageNum,"pageSize":pageSize}--%>
    <%--    $.post("${pageContext.request.contextPath}/product/all",data,function (res){--%>
    <%--        var data="";--%>
    <%--        for (i in res){--%>
    <%--            data=data+"<li><dl><dt><a href=${pageContext.request.contextPath}/product/selectbyid?id="+res[i].id+" target='_self'>"+--%>
    <%--                "<img src=${pageContext.request.contextPath}/images/product/"+res[i].filename+" /></s></dt>"+--%>
    <%--                "<dd class=title><a href='#' target='_self'>"+res[i].name+"</a></dd>"+--%>
    <%--                "<dd class='price'>￥"+res[i].price+"</dd></dl></li>";--%>
    <%--        }--%>
    <%--        $("#product").html(data);--%>
    <%--    },"json");--%>
    <%--    --%>

    <%--}--%>


</script>

</body>
</html>
